{extend name="main/index" /}
{block name="main"}
<div class="content-page">
    <!-- Start Content here -->
    <div class="content">
        <!-- Page Heading Start -->
        <!--<div class="page-heading">-->
            <!--<h1><i class='fa fa-table'></i>{$menu}</h1>-->
            <!--</div>-->
        <div class="widget">
            <form action="{:url('home/banner/savemenu')}" enctype="multipart/form-data" method="post">
                <input type="hidden" name="id" value="{$id}">
                选择文件 <input type="file" name="image" class="btn-block btn-success"/> <br>
                <button class="btn btn-info">提交</button>
            </form>

        </div>
        <div class="widget transparent animated fadeInDown">

            <div class="gallery-wrap">
                {volist name="photo" id="vo"}
                <div class="column">
                    <div class="inner">
                        <!--<a class="zooming" href="images/big/img001.jpg" title="Image title here">-->
                        <div class="img-wrap">
                            <img src="/uploads/menu/{$vo.pic}" alt="Image gallery" title="Image title here" class="mfp-fade">
                        </div>
                        <!--</a>-->
                        <button class="btn btn-primary btn-danger dell-btn" data-id="{$vo.id}">删除</button>
                    </div>
                    <!--<button class="btn btn-primary">修改</button>-->
                </div>
                {/volist}
            </div>
        </div>

        <!-- Page Heading End-->				<!-- Your awesome content goes here -->
        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <div class="additional-btn">
                            <a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
                            <a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
                            <a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>菜名</th>
                                    <th>价格</th>
                                    <th data-sortable="false">Option</th>
                                </tr>
                                </thead>

                                <tbody>
                                {volist name="me" id="vo"}
                                <tr>
                                    <td>{$vo.id}</td>
                                    <td>{$vo.menu}</td>
                                    <td>{$vo.price}</td>
                                    <td>
                                        <div class="btn-group btn-group-xs">
                                            <button data-toggle="tooltip" title="删除" class="btn btn-default del-btn" data-id="{$vo.id}"><i class="fa fa-power-off"></i></button>
                                            <button data-modal="md-3d-flip-horizontal" data-toggle="tooltip" title="编辑" class="btn btn-success md-trigger edit-btn" data-id="{$vo.id}"><i class="fa fa-edit"></i></button>
                                        </div>
                                    </td>
                                </tr>
                                {/volist}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="widget">
            <div class="widget-header transparent">
                <h2><strong>添加</strong> </h2>
                <div class="additional-btn">
                    <a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
                    <a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
                    <a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
                </div>
            </div>
            <div class="widget-content padding">
                <form class="form-inline" role="form" id="fo">
                    <input type="hidden" name="sid" value="{$id}">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail2">菜名</label>
                        <input type="text" class="form-control" id="exampleInputEmail2" placeholder="菜名" name="menu">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">价格</label>
                        <input type="text" class="form-control" id="exampleInputPassword2" placeholder="价格" name="price">
                    </div>
                    <buttons class="btn btn-default s-btn">提交</buttons>
                </form>
            </div>
        </div>
        <!-- Footer Start -->
        <footer>
            Huban Creative &copy; 2014
            <div class="footer-links pull-right">
                <a href="#">About</a><a href="#">Support</a><a href="#">Terms of Service</a><a href="#">Legal</a><a href="#">Help</a><a href="#">Contact Us</a>
            </div>
        </footer>
        <!-- Footer End -->
    </div>
    <!-- ============================================================== -->
</div>
<!--编辑模态框-->
<div class="md-modal md-3d-flip-horizontal" id="md-3d-flip-horizontal">
    <div class="md-content">
        <div>
            <div class="widget-content padding">
                <h3> <button class="btn btn-danger md-close">关闭</button></h3>
                <form class="form-horizontal" role="form" action="{:url('home/Menu/update')}" method="post">
                    <input type="hidden" name="id" id="id" value="">
                    <!--<input type="hidden" name="_method" value="PUT">-->
                    <div class="form-group">
                        <label for="input-text-help" class="col-sm-2 control-label">菜单名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control name menu" id="input-text-help" placeholder="菜单名" name="menu" value="">

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input-text-help" class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control tel price" id="input-text-help" placeholder="价格" name="price" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-default up-btn">Submit</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

    </div><!-- End div .md-content -->
</div>

{js href="/static/home/js/jquery.min.js"}
{js href="/static/home/js/bootstrap.js"}
{js href="/static/home/js/toastr.min.js"}
<script>
    $(function(){
//        增加菜单
        $('.s-btn').click(function () {
            var obj = $('#fo input').serialize();
                console.log(obj);
            addmenu(obj);
        });
//        删除菜单
        $('.del-btn').click(function(){
            var de_id = $(this).attr('data-id');
            var obj = $(this).parents('tr');
            delAjax(de_id,obj);
        });
//        编辑
        $('.edit-btn').click(function(){
            var de_id = $(this).attr('data-id');
            editAjax(de_id);

        });
//        删除图片
        $('.dell-btn').click(function(){
            var de_id = $(this).attr('data-id');
            var obj = $(this).parents('div');
//            console.log(de_id,obj);
            dellAjax(de_id,obj);
        });
    });
    //    删除室内环境的
    function dellAjax(id,obj)
    {
        $.ajax({
            type : 'post',
            url : '/menudelete/',
            data : {id : id},
            dataType : 'json',
            success : function(data){
                if (data.status){
                    toastr.success(data.info);
                    obj.remove();
                }else{
                    toastr.error(data.info);
                }
            },
            error : function(){
                alert('执行失败')
            }
        });
//        ajax请求时间过长用它刷新
        window.location.reload(true);
    }
//    编辑
    function editAjax(id)
    {

        $.ajax({
            type : 'get',
            url : '/edits/',
            data: {id:id},
            dataType:'json',
            success:function(data){
                if (data.status){
                    toastr.success(data.info);
                    $('#id').val(data.datas.id);
                    $('.menu').val(data.datas.menu);
                    $('.price').val(data.datas.price);
                }else{
                    toastr.error(data.info);
                }
            },
            error:function () {
                toastr.warning('执行失败');
            }
        });
//        window.location.reload(true);
    }

//    删除
    function delAjax(id,obj) {
        $.ajax({
            type : 'delete',
            url : '/me/' + id,
            dataType:'json',
            success:function(data){
                if (data.status){
                    toastr.success(data.info);
                    obj.remove();
                }else{
                    toastr.error(data.info);
                }
            },
            error:function () {
                toastr.warning('执行失败');
            }
        });
    }
    function addmenu(obj)
    {
        $.ajax({
            type : 'post',
            url : '/add/',
            data : obj,
            dataType:'json',
            success:function(data){
                if (data.status){
                    toastr.success(data.info);
                }else{
                    toastr.error(data.info);
                }
            },
            error:function () {
                toastr.warning('执行失败');
            }
        });
        window.location.reload(true);
    }
</script>
{/block}